﻿@{
    ViewData["Title"] = "角色管理";
}
<div class="layui-layout layui-layout-admin">
    <form class="layui-form" action="" lay-filter="val-filter">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="hidden" name="id" value="0">
                <input type="text" name="name" autocomplete="off" lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">编码</label>
            <div class="layui-input-block">
                <input type="text" name="code" autocomplete="off" lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-block">
                    <input type="number" value="100" lay-affix="number" name="orderNo" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="status" value="1" title="启用" checked>
                    <input type="radio" name="status" value="0" title="禁用">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="remark" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限</label>
            <div class="layui-input-block">
                <div id="tree"></div>
            </div>
        </div>

    </form>
</div>

@section scripts {
    <script type="text/javascript">
        var app = {};
        layui.use(['http', 'toast'], function () {
            var form = layui.form,
                toast = layui.toast, $ = layui.$,
                tree = layui.tree,
                http = layui.http;
            //
            http.get('/api/sysMenuEx/menuLayUITree').then((res) => {
                tree.render({
                    elem: '#tree',
                    data: res.result,
                    showCheckbox: true,  // 是否显示复选框
                    onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
                    id: 'tree-id-1'
                });
            }).then((res) => {
                //初始化选中树节点
                var url = '/api/sysRole/ownMenuList?Status=2&Id=' + app.data.id;
                http.get(url).then((res) => {
                    tree.setChecked('tree-id-1', res.result)
                });
            })
            //
            app.init = function () {
                var data = app.data || {};
                form.val('val-filter', data);
            }();
            app.save = function () {
                form.submit('val-filter', function (data) {
                    var postData = data.field;

                    postData.menuIdList = getCheckedId(tree.getChecked('tree-id-1'));
                    //角色列表
                    var url = postData.id == '0' ? '/api/sysRole/add' : '/api/sysRole/update'
                    http.post(url, postData).then((res) => {
                        if (res.code == 200) {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                            parent.layui.table.reload('lsttable');
                            toast.success({ message: '保存成功！' });
                        }
                        else {
                            layer.alert('保存失败，错误信息:' + res.message, { icon: 2 });
                        }
                    });

                    return false;
                });
            }
            //获取树选中的所有id
            function getCheckedId(data) {
                var arr = [];
                data.forEach(function (item) {
                    arr.push(item.id);
                    //item 有children属性
                    if (item.children != null) {
                        arr = arr.concat(getCheckedId(item.children));
                    }
                });
                return arr;
            }
        })
    </script>
}
